fixed linking and formatting issues #1
Conversation
There was a problem hiding this comment.
Looking good so far! I've left a few comments to consider before tomorrow's workshop. See if you can utilize more flexbox properties to achieve our desired styles (practice this here: https://flexboxfroggy.com/)
src/screens/PostScreen.tsx
Outdated
| <View style={styles.profileHeader}> | ||
| <ProfilePlaceholder style={styles.profileIcon} /> | ||
| <View> | ||
| <Text style={styles.profileName}>rbeggs</Text> | ||
| <Text style={styles.postDate}>September 19</Text> | ||
| </View> | ||
| </View> |
There was a problem hiding this comment.
Given that we want the username + profile placeholder to be grouped together, let's wrap them in their own div. Then apply justifyContent: 'space-between' to the profileHeader style to spread information across the width of the screen.
src/screens/PostScreen.tsx
Outdated
| <View style={styles.container}> | ||
| <ProfilePlaceholder /> | ||
| <Text>rbeggs</Text> | ||
| <Text>September 19</Text> | ||
| <Text> | ||
| {/* Profile Header */} |
There was a problem hiding this comment.
Consider applying styles to add spacing between the content and the sides of the screen. You can do so with the padding prop applied to the container View.
src/screens/PostScreen.tsx
Outdated
| <View style={styles.interactionRow}> | ||
| <HeartIcon style={styles.icon} /> | ||
| <Text style={styles.likesText}>256 Likes</Text> | ||
| <ShareIcon style={styles.icon} /> | ||
| </View> |
There was a problem hiding this comment.
Apply similar styles as the profileHeader suggestion to spread icons across the width of the screen.
| {/* Comments */} | ||
| <View style={styles.commentSection}> |
There was a problem hiding this comment.
One way to add a content divider would be to apply a border style to the top of the commentSection div.
src/screens/PostScreen.tsx
Outdated
| <View> | ||
| <Text style={styles.commentName}>philip_ye</Text> | ||
| <Text style={styles.commentText}> | ||
| This organization is doing amazing work tackling the complex root | ||
| causes of the issue. |
There was a problem hiding this comment.
How could we integrate the comment text here? Try placing the username and date text in the same div, that way they appear inline, above the comment text.
src/screens/styles.ts
Outdated
| postText: { | ||
| fontSize: 14, | ||
| lineHeight: 20, | ||
| marginBottom: 10, |
There was a problem hiding this comment.
Let's avoid applying spacing styles to text.
src/screens/styles.ts
Outdated
| commentSection: { | ||
| marginTop: 20, | ||
| }, | ||
| comment: { | ||
| flexDirection: 'row', | ||
| alignItems: 'center', | ||
| marginBottom: 10, | ||
| }, | ||
| commentIcon: { | ||
| width: 30, | ||
| height: 30, | ||
| marginRight: 10, | ||
| }, | ||
| commentName: { | ||
| fontWeight: 'bold', | ||
| }, | ||
| commentText: { | ||
| fontSize: 14, | ||
| lineHeight: 18, | ||
| }, |
There was a problem hiding this comment.
When we define absolute widths and margins and place them in line with each other, they'll compete and push content off the side of the screen. Using flex boxes with rowGap and columnGap properties can remedy this issue.
What's new in this PR
Description
added styles in styles.ts for the image, text, comments, etc.
Screenshots
How to review
Next steps
Relevant links
Online sources
Related PRs
CC: @ronniebeggs